<template>
  <div class="accountManage">
    <!--账号管理---------面包屑-->
    <a-breadcrumb style="text-align: left;font-size: 16px;margin-left: 15px;margin-bottom: -10px">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>APP管理</a-breadcrumb-item>
      <a-breadcrumb-item>用户管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!--账号管理---------分割线-->
    <a-divider/>
    <!--账号管理---------新增表单-->
    <div class="btn">
      <div class="right">
        <a-input-search placeholder="账号名称" style="width: 200px" @search="onSearch"/>
      </div>
    </div>
    <!--系统管理---------账号数据列表-->
    <a-table :columns="columns" :data-source="data" :loading="loadFlag" :pagination="false" :bordered="true">
      <span slot="isDisable" slot-scope="text, record">
        <a-switch checked-children="启用" un-checked-children="禁用"
                  :checked="Boolean(record.u_status === '0')" @change="lockAppUser($event, record)"/>
      </span>
    </a-table>
    <!--系统管理---------分页器-->
    <div class="pagination">
      <a-locale-provider :locale="zhCN">
        <a-pagination
          v-model="pageIndex"
          :total="total"
          :show-total="total => `共 ${total} 条数据`"
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-locale-provider>
    </div>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import qs from 'qs'
import {getAppUserList, lockAppUser} from '../http/api'

const columns = [
  {
    title: '用户名',
    dataIndex: 'u_nickname',
    align: 'center',
    width: 150
  }, {
    title: '登录名',
    dataIndex: 'u_name',
    align: 'center',
    width: 150
  }, {
    title: '账号状态',
    dataIndex: 'u_status',
    scopedSlots: {customRender: 'isDisable'},
    align: 'center',
    width: 150
  }
]
const data = []

export default {
  inject: ['reload'],
  data() {
    return {
      // 表格加载判断
      loadFlag: false,
      // 表格字段
      columns,
      data,
      // formModel 表单布局数据
      labelCol: {span: 5},
      wrapperCol: {span: 16},
      // formModel 表单默认数据
      form: {
        nickname: '',
        username: '',
        password: '123456'
      },
      // formModel 表单验证规则
      rules: {
        nickname: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ]
      },
      // formModel 表单开关判断
      visible: false,
      // 搜索框文本
      searchValue: '',
      // 组件汉化
      zhCN,
      // 分页器数据
      total: 0,
      pageIndex: 1,
      pageSize: 4
    }
  },
  methods: {
    // 获取账号数据
    async getAppUserList() {
      await getAppUserList({
        searchValue: this.searchValue,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.data.data
        this.total = res.data.total
        // 加载动作
        setTimeout(() => {
          this.loadFlag = false
        }, 100)
      })
    },
    // 打开注册账号的 Model
    showModal() {
      this.visible = true
      this.loadFlag = true
      this.$refs.ruleForm.resetFields()
    },
    // 关闭注册账号的 Model
    handleCancel(e) {
      this.visible = false
      this.loadFlag = false
    },
    // 获取到搜素框输入的文本，在调用 getAccountList() 重新查询账号信息
    onSearch(value) {
      this.searchValue = value
      this.$message.success('查询成功')
      this.getAppUserList()
    },
    // 锁定账号，禁止登录
    lockAppUser(e, val) {
      let user = { uid: val.u_id }
      if (e) user.isDisable = 0
      else user.isDisable = 1
      lockAppUser(qs.stringify(user))
        .then(res => {
          if (res.status === 200) {
            this.$message.success(res.msg)
            this.reload()
          }
        })
    },
    // 分页函数-点击换页函数
    pageChange(current, pageSize) {
      this.pageIndex = current
      this.pageSize = pageSize
      this.getAppUserList()
    },
    // 分页函数-每页显示条目函数
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.getAppUserList()
    }
  },
  created() {
    this.loadFlag = true
    this.getAppUserList()
  }
}
</script>
<style lang="less" scoped>
.right {
  text-align: right;
  margin: 15px 20px;
}

.pagination {
  margin: 15px 20px;
  text-align: right
}
</style>
